<template>
  <div class="wap-container manOrderInInfo">
    <section class="top bgfff">
      <div class="order-info">
        <ul class="pl10 pb15">
          <li class="rowflex">
            <div class="info-item c666 ">任务编号</div>
            <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span></div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">工程师</div>
            <div>{{engineerInfo.nickName}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">联系电话</div>
            <div>{{engineerInfo.mobile}}</div>
          </li>
          <li class="rowflex" v-if="picList.length > 0">
            <div class="info-item c666">故障照片</div>
            <div class="pic-box">
              <div class="pics rowflex">
                <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
              </div>
            </div>
          </li>
          <li class="rowflex" v-if="orderInfo.workOrderTitle">
            <div class="info-item c666 ">任务标题</div>
            <div class="errorDescription">{{orderInfo.workOrderTitle}}</div>
          </li>
          <li class="rowflex" v-if="orderInfo.errorDescription">
            <div class="info-item c666 ">任务描述</div>
            <div class="errorDescription">{{orderInfo.errorDescription}}</div>
          </li>
          <li class="rowflex" v-if="orderInfo.demand">
            <div class="info-item c666 ">任务要求</div>
            <div class="errorDescription">{{orderInfo.demand}}</div>
          </li>
        </ul>

        <div v-transfer-dom>
          <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
        </div>
      </div>
    </section>

  </div>
</template>

<script>
  import { Group, XInput, XButton, Divider,Loading,Previewer,TransferDom } from "vux";
  export default {
    name: "ManOrderInInfo",
    components: {
      Group,
      XInput,
      XButton,
      Divider,
      Loading,
      Previewer,
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        form: {
          backgrounder: {
            id: ''
          },
          engineer: {
            id: ''
          }
        },
        engineerInfo: {},
        orderId: '',
        orderInfo: {},
        picPathList: [],
        engineerOptions: [],
        picList: [],
        bigImgPath: [],
        //图片预览
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.manOrderInInfo .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
      }
    },
    methods: {
      //图片预览
      show(index) {
        console.log(index)
        this.$refs.previewer.show(index)
      },
      showBig() {
        this.showBigPicture = !this.showBigPicture;
      },
      distribute: function () {
        this.$http.put('/work/api/workorder/distribute/'+this.orderId,  this.form).then(res=>{
            this.$router.push({path: '/management/manOrderHome'})
          }
        )
      },
      getGCSList: function(){
        //获取工程师
        this.$http.get('/account/api/users?roleCode=GCS&noPage=true').then(res=>{
          console.log(res)
          this.engineerOptions = res.data.data
        })
      },
    },
    mounted () {
      let id = this.$route.query.orderId
      this.orderId = id
      this.$http.get('/work/api/workorder/'+this.orderId).then(res=>{
          this.orderInfo = res.data.data
          this.engineerInfo = this.orderInfo.engineer
          if (this.orderInfo.repairFileStore) {
            let key = this.orderInfo.repairFileStore
            this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
              let result = res.data.data[key]
              for (var i = 0 ; i < result.length; i++){
                this.picList.push(result[i].path)
              }
              //如果有多张则在预览图中显示
              this.bigImgPath = res.data.data[key].map(item => {
                return {msrc: this._getPathNo(item.path), src: this._getPathNo(item.path)}
              })
            })
          }
        }
      )
      this.getGCSList()
      this.form.backgrounder.id = this.$store.state.user.userInfo.id
    }
  }
</script>

<style lang="less">
  .manOrderInInfo{
    font-size: 0.13rem;
    overflow-x: hidden;
    margin-bottom: 0.5rem;
    .top, .bottom {
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .top-title, .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .order-info {
      font-size: 0.15rem;
      border-bottom: solid 1px #ebebeb;
      margin-top: 0;
    }
    .order-info ul {
      border-bottom: solid 1px #eee;
      padding-top: 0.01rem;
    }
    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .warrantyStatus{
      display: flex;
      justify-content: space-between;
      width: 2.75rem;
      margin-left: 0.75rem;
      font-size: 0.13rem;
    }
    .errorDescription{
      width: 2.75rem;
      line-height: normal;
      margin-top: -0.03rem;
    }
    .order-info .info-item {
      width: 0.75rem;
    }
    .picAndvioce-box {
      width: 100%;
      padding-left: 0.1rem;
      padding-bottom: 0.01rem;
    }
    .pic-box{
      width: 2.75rem;
    }
    .pics{
      overflow-x: auto;
    }
    .picItem{
      width: 1.3rem;
      height: 0.85rem;
      margin-right: 0.05rem;
      margin-top: 0.04rem;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .readVioce {
      background-color: #42a3fd;
      width: 0.9rem;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #fff;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
    }
    .readVioce img {
      margin-left: 0.1rem;
      width: 0.3rem;
      height: 0.3rem;
    }
    .isRead {
      width: 0.12rem;
      height: 0.12rem;
      margin-left: 0.05rem;
      margin-top: 0.14rem;
      background-color: #fa4a30;
      -webkit-border-radius: 0.12rem;
      -moz-border-radius: 0.12rem;
      border-radius: 0.12rem;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
    .star {
      width: 0.07rem;
      margin-right: 0.03rem;
      vertical-align: super;
    }
    select{
      margin-left: 0.04rem;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      width: 2.55rem;
      padding-right: 0.2rem;
      font-size: inherit;
      height: 0.25rem;
      line-height: 0.25rem;
      position: relative;
      z-index: 1;
      background: url("~assets/images2/icon_zuojian@2x.png") no-repeat 2.4rem center;
      background-size: 0.06rem 0.1rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    .pt3{
      padding-top: 0.03rem;
    }
  }
</style>
